<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="应聘者工号" required>
          <el-input v-model="jobNum" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="应聘者姓名" required>
          <el-input v-model="uname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="应聘者岗位" required>
          <el-input v-model="upos" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="应聘日期">
          <el-date-picker
                  size="mini"
                  v-model="udate"
                  type="date"
                  placeholder="选择日期"
                  :editable="false"
                  value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="信息提供者" required>
          <el-input v-model="provider" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="学历层次" required>
          <el-input v-model="degree" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校">
          <el-input v-model="graduate" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="起止时间">
          <el-input v-model="gratime" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="major" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="教育形式">
          <el-input v-model="eduform" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="认证结果" required>
          <el-input v-model="certification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="认证途径" required>
          <el-input v-model="way" size="mini"></el-input>
        </el-form-item>

        <p>工作经历调查</p>
        <el-collapse v-model="workactiveName" accordion>
          <el-collapse-item  name="1">
            <template #title>
              <el-form-item label="第一项" required>
                <el-input v-model="e1" size="mini"></el-input>
              </el-form-item>
            </template>

            <div>
              <p>您好，我这边是东莞亚声供应链管理公司人事部的，我姓：XX，您公司有离职前员工XXXX申请了我公司的XXXX岗位，我想向您验证下他的一些信息，您是否方便呢？</p>
              <p>请您回忆一下他在贵公司的任职时长、入职时间、离职时间</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              <el-form-item label="第二项" required>
                <el-input v-model="e2" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>他是因为什么原因离职?</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template #title>
              <el-form-item label="第三项" required>
                <el-input v-model="e3" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>他在您公司入职时是什么岗位？负责什么工作的？离职时是什么岗位？负责什么工作的？</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template #title>
              <el-form-item label="第四项" required>
                <el-input v-model="e4" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>他有哪些下属？负责哪个部门？他的上级汇报对象是谁？</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="5">
            <template #title>
              <el-form-item label="第五项" required>
                <el-input v-model="e5" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>跟别人相处的怎样？是否与其它同事或客户有过不愉快甚至争执？在职期间，是否出现过重大工作失误？</p>
            </div>
          </el-collapse-item>

          <el-collapse-item name="6">
            <template #title>
              <el-form-item label="第六项" required>
                <el-input v-model="e6" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>您对他的整体评价是怎么样的？他工作中最优秀突出的地方是哪里？与担任此类岗位的其它责任人相比，他的优缺点在哪里呢？</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="7">
            <template #title>
              <el-form-item label="第七项" required>
                <el-input v-model="e7" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>他离职时是否完成所有的工作手续交接？如果此人申请返聘是否愿意接受？</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="8">
            <template #title>
              <el-form-item label="第八项" required>
                <el-input v-model="e8" size="mini"></el-input>
              </el-form-item>
            </template>
            <div>
              <p>在他的职业成长与开发方面，您认为他还需要做些什么？</p>
            </div>
          </el-collapse-item>
        </el-collapse>

        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <p style="font-size:16px;font-weight: 900">审批人</p>
            <van-step v-show="oneShow">
              <van-image v-for="item in oneLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-show="twoShow">
              <van-image v-for="item in twoLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-show="threeShow">
              <van-image v-for="item in threeLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <!--<van-step v-show="fourShow">
              <van-image v-for="item in fourLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>-->

          </van-steps>
        </div>

        <!--<el-form-item>
          <el-button id="isAgree" v-show="showtg" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
          <el-button id="isNotAgree" v-show="showbh" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>

        </el-form-item>-->
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {
  data() {
    return {
      id:"",
      jobNum:"",
      uname:"",
      upos:"",
      udate:"",
      applicant:"",
      investigatime:"",
      provider:"",
      degree:"",
      graduate:"",
      gratime:"",
      major:"",
      eduform:"",
      certification:"",
      way:"",
      e1:"",
      e2:"",
      e3:"",
      e4:"",
      e5:"",
      e6:"",
      e7:"",
      e8:"",
      reason:"",
      uid:"",

      workactiveName:"",
      nowUser:"",
      title: "员工背景调查",

      isShow:false,
      message:"通过",
      message1:"驳回",
      show:false,

      showtg:true,
      showbh:true,

      active:"-1",//步骤索引,从0开始
      oneShow:false,//审批是否显示
      oneLd:[],
      twoShow:false,
      twoLd:[],
      threeShow:false,
      threeLd:[],
      fourShow:false,
      fourLd:[],

    };
  },

  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.id= this.$route.params.id;
    this.getBackgroundInfo();
  },

  methods: {
    //查找对应用户的上级领导进行审批
    getLd(){
      this.$https.post('/mobiles/getSpld',{
        nowUser:this.uid,
      }).then((res)=>{
        if (res.data.data.ld1.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.ld1;
        }
        if (res.data.data.ld2.length>0){
          this.twoShow=true;
          this.twoLd=res.data.data.ld2;
        }
        if (res.data.data.ld3.length>0){
          this.threeShow=true;
          this.threeLd=res.data.data.ld3;
        }
        /*if (res.data.data.ld4.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.ld4;
        }*/
      }).catch(err => {
        console.log(err);
      })
    },
    //根据入职管理的id找到相对应的入职管理详情
    getBackgroundInfo(){
      this.$https.post('/mobiles/getBackgroundInfo',{
        nowUser:this.nowUser,
        id:this.id,

      }).then((res)=>{
        this.uid=res.data.data.uid;
        this.getLd();

        this.active=res.data.data.agree-1;

        this.jobNum=res.data.data.jobnum;
        this.uname=res.data.data.uname;
        this.upos=res.data.data.upos;
        this.udate=res.data.data.udate;
        this.applicant=res.data.data.applicantName;
        this.investigatime=res.data.data.investigatime;
        this.provider=res.data.data.provider;
        this.degree=res.data.data.degree;
        this.graduate=res.data.data.graduate;

        this.gratime=res.data.data.gratime;
        this.major=res.data.data.major;
        this.eduform=res.data.data.eduform;
        this.certification=res.data.data.certification;
        this.way=res.data.data.way;
        this.e1=res.data.data.e1;
        this.e2=res.data.data.e2;
        this.e3=res.data.data.e3;
        this.e4=res.data.data.e4;
        this.e5=res.data.data.e5;
        this.e6=res.data.data.e6;
        this.e7=res.data.data.e7;
        this.e8=res.data.data.e8;

      }).catch(err => {
        console.log(err);
      })
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },

  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>